import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import { throttle } from '../../utils/throttle'
import NoticWrapper from './components/notic'
import UpdateWrapper from './components/update'
import SearchWrapper from './components/search'
import LoginWrapper from './components/login'
import TalkWrapper from './components/talk'
import BookList from './components/list'
import { actionCreators } from './store'
import {
  HomeWrapper,
  HomeContent,
  ListWrapper,
  ShowWrapper,
} from './style'


class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      animatedE: 'show animated fadeInUp',
      animatedS: 'animated'
    }
  }
  render() {
    const { widthTf } = this.props
    const { animatedE, animatedS } = this.state
    return (
      <main>
        <HomeWrapper>
          <HomeContent>
            <ListWrapper>
              <NoticWrapper />
              <SearchWrapper style={widthTf === 2?animatedE:animatedS} />
              <LoginWrapper style={widthTf === 2?animatedE:animatedS} />
              <UpdateWrapper />
              <BookList />
            </ListWrapper>
            <ShowWrapper>
              <SearchWrapper style={widthTf === 1?animatedE:animatedS} />
              <LoginWrapper style={widthTf === 1?animatedE:animatedS} />
              <TalkWrapper />
            </ShowWrapper>
          </HomeContent>
        </HomeWrapper>
      </main>
    )
  }
  componentDidMount() {
    this.props.changePosition.call(this)
    window.addEventListener('resize', throttle(this.props.changePosition.bind(this), 500))
  }
  componentWillUnmount() {
    window.removeEventListener('resize', throttle(this.props.changePosition.bind(this), 500))
  }
}

const homeState = (state) => {
  return {
    widthTf: state.getIn(['home','widthTf']),
  }
}
const homeDispatch = (dispatch) => {
  return {
    changePosition() { //改变元素位置
      let { widthTf } = this.props
      const width = window.innerWidth
      if (width <= 1101) {
        if(widthTf !== 2){
          widthTf = 2
          const action = actionCreators.changeWidthTf(widthTf)
          dispatch(action)
        }
      } else {
        if(widthTf !== 1){
          widthTf = 1
          const action = actionCreators.changeWidthTf(widthTf)
          dispatch(action)
        }
      }
      
    }
  }
}
export default connect(homeState, homeDispatch)(Home)